<template>
	<div class="main flex-v">
		<div class="balanceOuterWrap">
			<div class="balanceTop">
				<go-back :aa='preurl'></go-back>
				<span :class="['banTitle',typer==1?'col1':typer==2?'col2':'col3']">{{typer==1?'平衡策略':typer==2?'院校优先策略':'专业优先策略'}}</span>
				<img class="topBg" :src="typer==1?imgBg1:typer==2?imgBg2:imgBg3" alt="">
			</div>
			<universities v-on:btnClick='goesss' v-on:btnMajorClick='gotMajorInfo'></universities>

		</div>
		<div v-transfer-dom>
			<popup v-model="show13" position="bottom" max-height="93%">
				<div style="width: 7.5rem;height: 100vh;">
					<div class="popBoxWrap">
						<scroller>
							<div class="popBox">
								<span class="closeSp" @click="show13=false">
									<img class="imgIcon" src="~/static/images/volunteer_icon_close.png" alt="">
								</span>
								<span class="titlesp">
									<img class="imgIcon" v-show="fromChildData.stat>0" :src="fromChildData.stat==1?imgcho1:fromChildData.stat==2?imgcho2:fromChildData.stat==3?imgcho3:imgcho4"
									 alt="">
									<b> {{fromChildData.likeName}}</b>
								</span>
								<span class="titledesc">
									<b>综合评分 {{fromChildData.likeScore}}</b><b>·</b><b>2019招生计划 {{fromChildData.likeCount }}</b></span>
								<div id="echart"></div>
								<span class="titleLuqu">{{gotitle}}</span>
								<div class="luquBox">
									<admission-line :lineData="lineData1" :titleData='titleData1'></admission-line>
								</div>
								<div class="fixedBarBtn" @click="jumpToNext">{{gotitle1}}</div>
							</div>
						</scroller>
					</div>


				</div>

			</popup>
		</div>
	</div>
</template> 

<script>
	import echarts from '@/plugins/echarts'
	import axios from '~/plugins/axios';
	import axios1 from '~/plugins/axios1';
	import goBack from '~/components/goBack'
	import admissionLine from '~/components/admissionLine'
	import universities from '~/components/Universities'
	import {
		TransferDom,
		Popup
	} from 'vux'
	import ls from 'store2'
	import {
		setTimeout
	} from 'timers';


	export default {
		head: {},
		directives: {
			TransferDom
		},
		components: {
			goBack,
			universities,
			Popup,
			admissionLine
		},
		data() {
			return {
				preurl:ls.get('preUrl'),
				gotitle: '',
				gotitle1: '',
				imgBg1: require('~/static/images/vol4.png'),
				imgBg2: require('~/static/images/vol5.png'),
				imgBg3: require('~/static/images/vol6.png'),
				imgcho1: require('~/static/images/volunteer_icon_chong.png'),
				imgcho2: require('~/static/images/volunteer_icon_chong1.png'),
				imgcho3: require('~/static/images/volunteer_icon_chong2.png'),
				imgcho4: require('~/static/images/volunteer_icon_chong3.png'),
				typer: 0,
				fromChildData: {
					likeName: '',
					likeScore: '',
					likeCount: '',
					stat: 0
				},
				show13: false,
				titleData1: [],
				lineData1: [],
				majorCode: '', // 传递过来的专业code, 通过‘+’拼接
				userType: ls.get('userData').userType,
			}
		},
		created() {
			this.commonJs.gologins();
			this.typer = this.$route.query.type;
			console.log('typer', this.typer)

		},
		methods: {
			getColDetail(colcode) {
				this.titleData1 = ['年份', '招生批次', '最低分', '最低位次', '录取人数']
				axios1.post('/volunteer/getAcademyScore', {
					"academyCode": colcode,
					"userType": this.userType,
					// "volume": ls.get('vounms')
				}, true).then(res => {
					if (res.code === '0') {
						let colData = res.data;
						let are = []
						colData.forEach(item => {

							are.push({
								main: [item.year, item.level, item.minScore, item.minRanking, item.numPlan]
							})
						})
						this.lineData1 = are

					}

				}).catch((error) => {
					this.$vux.toast.text(error);
				})
			},
			getMajorDetail(major) {
				this.titleData1 = ['年份', '最低分', '最低位次', '录取人数', '专业线差']
				axios1.post('/volunteer/getMajorDetails', major, true).then(res => {
					if (res.code === '0') {
						this.lineData1 = res.data;

					}

				}).catch((error) => {
					this.$vux.toast.text(error);
				})
			},
			gotMajorInfo(data, code, line) {
				this.majorCode = data.majorCode;
				console.log(this.majorCode)
				this.fromChildData.likeName = data.majName;
				(data.totalPoint).toFixed(0) < 0 ? this.fromChildData.likeScore = 0 : this.fromChildData.likeScore = (data.totalPoint)
					.toFixed(0)
				this.fromChildData.stat = 0;
				this.fromChildData.likeCount = data.enrollmentPlan;
				this.gotitle = '专业录取分数线';
				this.gotitle1 = '查看专业详情';
				let values = [data.characterMatchPoint, data.majorHitPoint, data.majorStrengthPoint, data.scoreMatchPoint, data.stabilityPoint];
				let maxValue = [{
						text: '职业性格',
						max: 5
					},
					{
						text: '专业要求',
						max: 5
					},
					{
						text: '学科实力',
						max: 5
					},
					{
						text: '分数吻合',
						max: 5
					},
					{
						text: '录取稳定',
						max: 5
					}
				]
				this.show13 = true;
				console.log('values', values)
				this.drawPie('#75BD50', maxValue, values)
				let majorObj = {
					"academyCode": code,
					"enrollmentMark": line,
					"majName": data.majName,
					"userType": this.userType,
					// "volume": ls.get('vounms')
				}
				this.getMajorDetail(majorObj)
				console.log('我是传过来的das专业', data)
			},
			goesss(data) {

				this.fromChildData.likeName = data.acadName;
				this.typer == 1 ? this.fromChildData.likeScore = (data.totalPoint).toFixed(0) : this.typer == 2 ? this.fromChildData
					.likeScore = (data.acadFirstTotalPoint).toFixed(0) : this.fromChildData.likeScore = (data.majorFirstTotalPoint).toFixed(
						0)
				this.fromChildData.likeCount = data.enrollmentPlan;
				this.fromChildData.stat = data.academyType;
				this.gotitle = '院校分数线';
				this.gotitle1 = '查看院校详情';
				let values = [data.academyStrength, data.areaAnalysisPoint, data.areaMatchPoint, data.majorMatchPoint, data.scoreMatchPoint,
					data.stabilityPoint
				];
				let maxValue = [{
					text: '院校实力',
					max: 5
				}, {
					text: '区域认可',
					max: 5
				}, {
					text: '地域要求',
					max: 5
				}, {
					text: '专业吻合',
					max: 5
				}, {
					text: '分数吻合',
					max: 5
				}, {
					text: '录取稳定',
					max: 5
				}]
				this.show13 = true;
				this.drawPie('#FFC403', maxValue, values)
				this.getColDetail(data.acadCode)
			},
			gots() {
				alert(111)
			},
			goto(routerName, queryData) {

				this.$router.replace({
					path: routerName,
					query: {
						type: queryData
					}
				});

			},
			openEchar() {
				this.show13 = true
				this.drawPie()
			},
			drawPie(defaultColor, maxValue, values) {

				var charts = echarts.init(document.getElementById('echart'))
				var option = {
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						x: 'center',
						data: ['']
					},

					toolbox: {
						show: false,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							restore: {
								show: false
							},
							saveAsImage: {
								show: false
							}
						}
					},
					calculable: true,
					textStyle: {
						color: '#222', // 文字颜色
						fontWeight: 'bold'
					},
					polar: [{
						indicator: maxValue,
						splitLine: {
							show: true,
							lineStyle: {
								width: 1,
								color: '#EEEEEE' // 图表背景网格线的颜色
							},
						},
						radius: 80
					}],
					series: [{
						name: '',
						type: 'radar',
						symbol: "none", // 去掉图表中各个图区域的边框线拐点
						itemStyle: {
							normal: {
								color: "rgba(0,0,0,0)", // 图表中各个图区域的边框线拐点颜色
								lineStyle: {
									color: defaultColor // 图表中各个图区域的边框线颜色
								},
								areaStyle: {
									type: 'default',
									color: [defaultColor] // 图表背景网格的颜色
								}
							}
						},
						data: [{
							value: values,
							name: ''
						}]
					}]
				}
				charts.setOption(option);
			},
			jumpToNext() {
				const codeList = this.majorCode.split('+');
				console.log('codeList', codeList);
				if (this.gotitle1 == '查看院校详情') {
					this.$vux.toast.text('敬请期待~')

					// this.goto('../university/univDetail');
					// 跳转到院校库
				} else if (this.gotitle1 == '查看专业详情') {
					if (codeList.length == 1) {
						const sendObj = {
							code: codeList[0],
							typeId: this.$route.query.type,
						}
						this.commonJs.gosto('/professional/detail', sendObj);
					} else if (codeList.length > 1) {
						const sendObj = {
							list: codeList,
							typeId: this.$route.query.type,
						}
						this.commonJs.gosto('/professional/list', sendObj);
					}
				}
			},
			fun() {
				this.$router.replace({
					path: '../volunteer/programme'

				})

			}
		},

		mounted: function() {
			this.$vux.loading.hide()
			if (this.commonJs.isTerminal() == 'isAndroid') {
				if (window.history && window.history.pushState) {
					history.pushState(null, null, document.URL);
					window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
				}
			}
			ls.set('preUrl', '../volunteer/balance')
		},
		destroyed() {
			window.removeEventListener('popstate', this.fun, false); //false阻止默认事件
		},
		computed: {

		},
		watch: {}
	}
</script>

<style scoped lang="less">
	/deep/h4 {
		font-size: 0.4rem !important;
	}

	/deep/.vux-popup-dialog {
		background: none;
	}

	.popBoxWrap {
		width: 7.5rem;
		min-height: 100vh;
		background: rgba(255, 255, 255, 1);
		border-radius: 0.3rem 0.3rem 0px 0px;

		.popBox {
			width: 100%;
			height: auto;
			min-height: 100vh;
			overflow: hidden;
			padding: 0 0.3rem;
			box-sizing: border-box;

			.closeSp {
				display: block;
				width: 0.4rem;
				height: 0.4rem;
				margin-left: 6.4rem;
				margin-top: 0.3rem;
				font-size: 0.3rem;

				.imgIcon {
					width: 0.4rem;
					height: 0.4rem;
				}
			}

			.titlesp {
				display: block;
				// height: 0.56rem;
				min-height: 0.4rem;
				height: auto;
				// height: 0.4rem;
				font-size: 0.3rem;
				overflow: hidden;
				padding-right: 0.3rem;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				.imgIcon {
					width: 0.6rem;
					height: 0.6rem;
					display: inline-block;

					vertical-align: middle;
				}

				b {
					line-height: 0.4rem;
					font-size: 0.3rem;
					font-weight: bold;
					color: rgba(34, 34, 34, 1);
					height: auto;
				}
			}

			.titledesc {
				display: block;
				height: 0.4rem;
				font-size: 0.3rem;
				margin-top: 0.1rem;

				b {
					font-size: 0.26rem;
					font-weight: bold;
					color: rgba(153, 153, 153, 1);
					line-height: 0.37rem;
					margin-right: 0.1rem;
				}
			}

			#echart {
				width: 6.6rem;
				height: 5rem;
				margin: 0 auto;
				// transform: rotate(-90deg);
			}

			.luquBox {
				width: 100%;
				height: auto;
			}

			.titleLuqu {
				display: block;
				height: 0.42rem;
				font-size: 0.3rem;
				font-weight: bold;
				color: rgba(34, 34, 34, 1);
				line-height: 0.42rem;
				margin-bottom: 0.15rem;
			}

			.fixedBarBtn {
				width: 6.3rem;
				height: 0.8rem;
				background: rgba(255, 255, 255, 1);
				border-radius: 0.1rem;
				border: 1px solid rgba(104, 189, 26, 1);
				font-size: 0.3rem;
				font-weight: bold;
				color: rgba(108, 191, 32, 1);
				line-height: 0.8rem;
				text-align: center;
				margin: 0 auto;
				z-index: 2;
				// position: fixed;
				// bottom: 0.2rem;
				// left: 0.6rem;
			}
		}
	}

	.zhuantiBox {
		height: auto;
	}

	.balanceOuterWrap {
		width: 100%;
		min-height: 100vh;

		.balanceTop {
			z-index: 2;
			width: 100%;
			height: 2.6rem;
			// background: #fff;
			position: relative;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
			border-bottom-left-radius: 0.2rem;
			border-bottom-right-radius: 0.2rem;
			// background: url('~/static/images/volunteer_pic_profession_bg.png') no-repeat;
			background-size: cover;

			.topBg {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 3.67rem;
				height: 2.06rem;
			}

			.banTitle {
				display: block;
				height: 0.62rem;
				font-size: 0.44rem;
				font-weight: bold;

				line-height: 0.62rem;
				margin-left: 0.5rem;
				margin-top: 0.3rem;
			}

			.col1 {
				color: rgba(148, 210, 103, 1);
			}

			.col2 {
				color: #fec03e;
			}

			.col3 {
				color: #5ab2f1;
			}
		}

		.balanceWrap {
			width: 7.5rem;
			min-height: 100vh;
			background: #fff;

			.balanceBox {
				width: 100%;
				height: auto;
				padding: 0.3rem 0rem;
				box-sizing: border-box;

				.blBar1 {
					width: 100%;
					height: 0.8rem;
					background: rgba(250, 250, 250, 1);
					border-radius: 0.1rem;
					padding: 0 0.2rem;
					box-sizing: border-box;

					.sp1 {
						height: 0.8rem;

						i,
						b,
						em {
							display: inline-block;
							vertical-align: middle;
						}

						i {
							width: 0.18rem;
							height: 0.25rem;
							background: rgba(241, 116, 103, 1);
							border-radius: 0.09rem;
						}

						b {
							font-size: 0.34rem;
							font-weight: bold;
							color: rgba(34, 34, 34, 1);
							line-height: 0.8rem;
							margin-left: 0.25rem;
						}

						em {
							line-height: 0.8rem;
							margin-left: 0.2rem;
							font-size: 0.3rem;
							font-weight: bold;
							color: rgba(187, 187, 187, 1);
						}
					}

					.imgIcon {
						width: 0.4rem;
						height: 0.4rem;
					}
				}
			}
		}
	}
</style>
